<template>
  <div class="drag">
    <VueDragResize :w="200" :h="200" v-on:resizing="resize" v-on:dragging="resize">
      <div class="box" :style="{width: + vw+ 'px',height:+vh+'px'}">
        <img src="@/assets/test.png" />
      </div>
    </VueDragResize>
  </div>
</template>

<script>
import VueDragResize from "vue-drag-resize"; //缩放、拖拽
export default {
  name: "drag",
  components: {
    VueDragResize
  },
  data() {
    return {
      vw: 0,
      vh: 0,
      top: 0,
      left: 0
    };
  },
  created() {
    this.vw = 200 + "px";
    this.vh = 200 + "px";
  },
  resize(newRect) {
    this.vw = newRect.width;
    this.vh = newRect.height;
    this.top = newRect.top;
    this.left = newRect.left;
  }
};
</script>

<style lang="less" scope>
.box {
  width: 100%;
  height: 100%;
  img {
    width: 100%;
  }
}
</style>